<script setup>
import * as echarts from "echarts";

const main = ref();
const init = () => {
  const myChart = echarts.init(main.value, 'null', {width: 1680, height: 320});
  const option = {
    title: {
      y: "0%",
      textStyle: {
        color: "#001454",
        fontSize: "16",
        fontWeight: "normal",
      },
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(99, 149, 250, 1)",
      axisPointer: {
        type: "none",
      },
    },
    grid: {
      top: "5%",
      left: "5%",
      right: "3%",
      bottom: "8%",
    },
    xAxis: [
      {
        type: "category",
        color: "#59588D",
        axisLine: {
          lineStyle: {
            color: "#777777",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          margin: 10,
          color: "#777777",
          textStyle: {
            fontSize: 14,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#F1F1F1",
          },
        },
        data: ["6:00", "7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"],
      }
    ],
    yAxis: [
      {
        splitNumber: 4,
        axisTick: {show: false},
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#F1F1F1",
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#F1F1F1",
          },
        },
        axisLabel: {
          color: "#151E26",
          formatter: "{value} ",
        },
      }
    ],
    series: [
      {
        name: "",
        type: "line",
        smooth: true,
        showSymbol: false,
        symbol: "circle",
        symbolSize: 10,
        lineStyle: {
          normal: {
            color: "#48B3FF",
          },
        },
        label: {
          show: false,
          position: "top",
          textStyle: {
            color: "#48B3FF",
          },
        },
        itemStyle: {
          color: "#FFF",
          borderColor: "#48B3FF",
          borderWidth: 2,
        },
        tooltip: {
          show: true,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: "rgba(195,230,255,1)",},
              {offset: 1, color: "rgba(195,230,255,0.1)",},
            ], false),
            shadowColor: "rgba(25,163,223, 0.5)",
            shadowBlur: 20,
          },
        },
        data: [111, 222, 4444, 18888, 32332, 55455, 66666, 31313, 14444, 36012, 66666, 44444, 22222, 11111, 4000, 2000, 555, 323],
      }
    ]
  };
  myChart.setOption(option);
};

onMounted(() => {
  init();
});

</script>

<template>
  <div id="main" ref="main"></div>
</template>

<style scoped lang="less">
#main {
  width: 100%;
  height: 320px;;
}
</style>